<template>
  <div>
    <div style="position: relative">
      <el-button
        type="primary"
        style="top: 0px; right: 0; position: absolute"
        @click="handleSubmit"
      >
        {{ $i18n.t("common.submit") }}
      </el-button>
    </div>
    <div class="layoutTable direction">
      <div class="top">
        <h3>{{ $i18n.t("mesCapacityCodePrinting.baseInfo") }}</h3>
        <ele-form v-model="formData" v-bind="editTableFormDesc" ref="form"> </ele-form>
      </div>
      <div class="right">
        <ele-table-batch-editor
          ref="table"
          :column="columns"
          v-model="tableData"
          :operateList="operateList"
          :isShowAddBtn="true"
          @handleOperateEvent="handleOperateEvent"
        >
          <template v-slot:tableTitle>
            <h3>{{ $i18n.t("mesCapacityCodePrinting.detailList") }}</h3>
          </template>
        </ele-table-batch-editor>
      </div>
    </div>
  </div>
</template>
<script>
import {
  editTableRowConfig,
  editTableFormDesc
} from "./config";
import {
  rowBatchCreate,
  getLineCodeList,
} from '@/api/print/mesProdBoxcode'
import {
  getInfo
} from '@/api/print/mesProdOrder'

export default {
  data() {
    return {
      formData: {},
      editTableFormDesc,
      isLoading: false,
      // 列表头按钮配置
      operateList: [
        {
          name: $i18n.t("common.add"),
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handleName: "add", //点击时返回的标识
        },
      ],
      // 表格数据
      tableData: [],

      // 表格列
      columns: [
        {
          type: "index",
        },
        {
          prop: "planCode",
          label: $i18n.t("mesCapacityCodePrinting.planCode"),
          component: "el-input",
        },
        {
          prop: "orderCode",
          label: $i18n.t("mesCapacityCodePrinting.orderCode"),
          component: "el-input",
        },
        {
          prop: "prodCode",
          label: $i18n.t("mesCapacityCodePrinting.prodCode"),
          component: "el-input",
        },
        {
          prop: "prodName",
          label: $i18n.t("mesCapacityCodePrinting.prodName"),
          component: "el-input",
        },
        {
          prop: "seriesCode",
          label: $i18n.t("mesCapacityCodePrinting.seriesCode"),
          component: "el-input",
        },
        {
          prop: "seriesName",
          label: $i18n.t("mesCapacityCodePrinting.seriesName"),
          component: "el-input",
        },
        {
          prop: "count",
          label: $i18n.t("mesCapacityCodePrinting.count"),
          component: "el-input-number",
        },
        {
          prop: "planBeginDate",
          label: $i18n.t("mesCapacityCodePrinting.planBeginDate"),
          component: "el-input",
        },
        {
          prop: "planEndDate",
          label: $i18n.t("mesCapacityCodePrinting.planEndDate"),
          component: "el-input",
        },
        {
          prop: "barcodePrintTemp",
          label: $i18n.t("mesCapacityCodePrinting.barcodePrintTemp"),
          component: "el-select",
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getBarcodePrintTempList()
            return list.data.result
          },
        },
        {
          prop: "boxcode",
          label: $i18n.t("mesCapacityCodePrinting.boxcode"),
          component: "el-input",
        },
        {
          prop: "barcodeFront",
          label: $i18n.t("mesCapacityCodePrinting.barcodeFront"),
          component: "el-input",
        },
        {
          prop: "lineName",
          label: $i18n.t("mesCapacityCodePrinting.lineName"),
          component: "el-input",
        },
        {
          prop: "lineCode",
          label: $i18n.t("mesCapacityCodePrinting.lineCode"),
          component: "el-select",
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getLineCodeList()
            return list.data.result
          },
        },
        {
          prop: "isPrint",
          label: $i18n.t("mesCapacityCodePrinting.isPrint"),
          component: "el-select",
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getIsPrintList()
            return list.data.result
          },
        },
        {
          prop: "isSubmitted",
          label: $i18n.t("mesCapacityCodePrinting.isSubmitted"),
          component: "el-select",
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getIsSubmittedList()
            return list.data.result
          },
        },
        {
          prop: "factoryCode",
          label: $i18n.t("mesCapacityCodePrinting.factoryCode"),
          component: "el-input",
        },
        {
          prop: "remark",
          label: $i18n.t("mesCapacityCodePrinting.remark"),
          component: "el-input",
        },
        {
          prop: "operate",
          label: $i18n.t("common.operation"),
          width: 100,
          render: (h, scope) => {
            return (
              <ele-row-operation
                scope={scope}
                rowConfig={editTableRowConfig}
                onRowOperate={this.rowOperate}
              />
            );
          },
        },
      ],
    };
  },
  created() {
    // 发送请求获取外键及关联字段信息
    getInfo(this.$route.query.id)
        .then((res) => {
          this.editTableFormDesc.disabled=true;
          this.formData = {
            orderCode : res.data.result.id,
            orderCode : res.data.result.orderCode,
          }
        })
        .finally(() => {
          this.isLoading = false
        })
  },
  methods: {
    //顶部操作按钮事件
    handleOperateEvent(data) {
      const fnc = {
        add: () => {
          this.tableData = [...this.tableData, {}];
        },
      };
      fnc[data.handleName]();
    },
    //行操作事件
    rowOperate(data) {
      console.log(data);
      this.tableData.splice(data.$index, 1);
    },
    //提交事件
    handleSubmit() {
      //如果表单有必填项 使用 validate() 检验，如果没有校验可直接提交
      //表单的校验需开发者自己做循环校验
      const data = this.tableData.map(d => d = {...d, ...this.formData})
      rowBatchCreate(data)
        .then(res => {
          const message = res.data.message
          this.$message.success(message || $i18n.t("common.addSuccess"))
          this.clear();
        })
    },
    clear() {
      this.formData = {}
      this.tableData = []
    }
  },
};
</script>
<style lang="scss" scoped>
.direction {
  flex-direction: column;
}
.layoutTable {
  display: flex;
  .top {
    width: 100%;
  }
  .left {
    width: 300px;
  }
  .right {
    flex: 1;
  }
}
</style>
